<template>
  <div class="dashboard">
    <!-- 头部标题 -->
    <div class="header">
      <h1>某公司大数据监控平台</h1>
      <div class="nav-tabs">
        <span class="tab active">标题样式</span>
        <span class="tab">标题样式</span>
        <span class="tab">标题样式</span>
        <span class="tab">标题样式</span>
        <span class="tab">标题样式</span>
        <span class="tab">标题样式</span>
      </div>
      <div class="datetime">2021/9/17 15:45:51</div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧面板 -->
      <div class="left-panel">
        <!-- 版块轨迹1 -->
        <div class="panel-item">
          <h3>版块轨迹1</h3>
          <div class="data-table">
            <div class="table-header">
              <span>业务类型</span>
              <span>计划完成</span>
              <span>实际完成</span>
              <span>增长率</span>
            </div>
            <div class="table-row">
              <span>类型1</span>
              <span>1000万</span>
              <span>800万</span>
              <span class="rate">11.2%</span>
            </div>
            <div class="table-row">
              <span>类型1</span>
              <span>1000万</span>
              <span>900万</span>
              <span class="rate">11.9%</span>
            </div>
            <div class="table-row">
              <span>类型1</span>
              <span>1000万</span>
              <span>900万</span>
              <span class="rate">11.1%</span>
            </div>
            <div class="table-row">
              <span>类型1</span>
              <span>1000万</span>
              <span>900万</span>
              <span class="rate">11.2%</span>
            </div>
            <div class="table-row">
              <span>类型1</span>
              <span>1000万</span>
              <span>900万</span>
              <span class="rate">11.2%</span>
            </div>
          </div>
        </div>

        <!-- 版块轨迹 -->
        <div class="panel-item">
          <h3>版块轨迹</h3>
          <div class="radar-chart" ref="radarChart"></div>
          <div class="radar-legend">
            <div class="legend-item">
              <span class="legend-dot blue"></span>
              <span>文本1</span>
              <span class="value">43</span>
            </div>
            <div class="legend-item">
              <span class="legend-dot green"></span>
              <span>文本2</span>
              <span class="value">100</span>
            </div>
            <div class="legend-item">
              <span class="legend-dot yellow"></span>
              <span>文本3</span>
              <span class="value">28</span>
            </div>
            <div class="legend-item">
              <span class="legend-dot orange"></span>
              <span>文本4</span>
              <span class="value">3</span>
            </div>
            <div class="legend-item">
              <span class="legend-dot purple"></span>
              <span>文本5</span>
              <span class="value">150</span>
            </div>
          </div>
        </div>

        <!-- 版块轨迹 -->
        <div class="panel-item">
          <h3>版块轨迹</h3>
          <div class="pie-charts">
            <div class="pie-chart" ref="pieChart1"></div>
            <div class="pie-chart" ref="pieChart2"></div>
          </div>
          <div class="pie-legend">
            <div class="legend-row">
              <span class="legend-dot cyan"></span>
              <span>20-29岁</span>
            </div>
            <div class="legend-row">
              <span class="legend-dot blue"></span>
              <span>30-39岁</span>
            </div>
            <div class="legend-row">
              <span class="legend-dot yellow"></span>
              <span>40-49岁</span>
            </div>
            <div class="legend-row">
              <span class="legend-dot green"></span>
              <span>50岁以上</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间区域 -->
      <div class="center-panel">
        <!-- 顶部指标卡片 -->
        <div class="metrics-cards">
          <div class="metric-card">
            <div class="metric-label">数据1</div>
            <div class="metric-value">40%</div>
          </div>
          <div class="metric-card">
            <div class="metric-label">数据2</div>
            <div class="metric-value">12%</div>
          </div>
          <div class="metric-card">
            <div class="metric-label">数据3</div>
            <div class="metric-value">80</div>
          </div>
          <div class="metric-card">
            <div class="metric-label">数据4</div>
            <div class="metric-value">124</div>
          </div>
          <div class="metric-card special">
            <div class="metric-label">实时行驶车辆</div>
            <div class="metric-value">10%</div>
            <div class="metric-sub">实时行驶车辆1456</div>
          </div>
        </div>

        <!-- 地图区域 -->
        <div class="map-container">
          <div class="map-chart" ref="mapChart"></div>
          <div class="map-legend">
            <h4>版块轨迹</h4>
            <div class="trend-chart" ref="trendChart"></div>
            <div class="trend-stats">
              <div class="stat-item">
                <span class="label">业务类型</span>
                <span class="value">12件</span>
              </div>
              <div class="stat-item">
                <span class="label">业务类型</span>
                <span class="value">100</span>
              </div>
              <div class="stat-item">
                <span class="label">业务类型</span>
                <span class="value">20</span>
              </div>
              <div class="stat-item">
                <span class="label">业务类型</span>
                <span class="value">15</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 底部图表区域 -->
        <div class="bottom-charts">
          <div class="chart-item">
            <h4>版块轨迹</h4>
            <div class="line-chart" ref="lineChart1"></div>
          </div>
          <div class="chart-item">
            <h4>版块轨迹</h4>
            <div class="line-chart" ref="lineChart2"></div>
          </div>
          <div class="chart-item">
            <h4>版块轨迹</h4>
            <div class="progress-chart">
              <div class="progress-item">
                <span>日均成交人数</span>
                <span class="value">19%</span>
              </div>
              <div class="progress-bar">
                <div class="progress-fill" style="width: 19%"></div>
              </div>
              <div class="progress-value">1835人</div>
            </div>
            <div class="chart-stats">
              <div class="stat">
                <span class="dot blue"></span>
                <span>男</span>
                <span>40人</span>
              </div>
              <div class="stat">
                <span class="dot red"></span>
                <span>女</span>
                <span>日均成交</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧面板 -->
      <div class="right-panel">
        <!-- 版块轨迹 -->
        <div class="panel-item">
          <h3>版块轨迹</h3>
          <div class="bar-chart" ref="barChart"></div>
          <div class="chart-legend">
            <span class="legend-dot blue"></span>
            <span>文本1</span>
            <span class="legend-dot green"></span>
            <span>文本2</span>
          </div>
        </div>

        <!-- 版块轨迹 -->
        <div class="panel-item">
          <h3>版块轨迹</h3>
          <div class="gauge-container">
            <div class="gauge-item">
              <div class="gauge-label">加工厂数量</div>
              <div class="gauge-value">关键词一天</div>
            </div>
            <div class="gauge-circles">
              <div class="gauge-circle large">
                <span class="gauge-text">大数据</span>
              </div>
              <div class="gauge-circle medium">
                <span class="gauge-text">大数据</span>
              </div>
              <div class="gauge-circle small">
                <span class="gauge-text">大数据</span>
              </div>
            </div>
          </div>
          <div class="gauge-stats">
            <div class="stat-row">
              <span>1.数据分析</span>
              <span class="value">12167</span>
            </div>
            <div class="stat-row">
              <span>2.云开发</span>
              <span class="value">12167</span>
            </div>
            <div class="stat-row">
              <span>3.数据分析</span>
              <span class="value">12167</span>
            </div>
            <div class="stat-row">
              <span>4.数据挖掘</span>
              <span class="value">12167</span>
            </div>
            <div class="stat-row">
              <span>5.云计算</span>
              <span class="value">12167</span>
            </div>
          </div>
        </div>

        <!-- 版块轨迹 -->
        <div class="panel-item">
          <h3>版块轨迹</h3>
          <div class="donut-charts">
            <div class="donut-chart" ref="donutChart1"></div>
            <div class="donut-chart" ref="donutChart2"></div>
          </div>
          <div class="donut-legend">
            <div class="legend-col">
              <div class="legend-item">
                <span class="legend-dot cyan"></span>
                <span>数据处理上报</span>
              </div>
              <div class="legend-item">
                <span class="legend-dot blue"></span>
                <span>数据处理上报</span>
              </div>
              <div class="legend-item">
                <span class="legend-dot green"></span>
                <span>数据处理上报</span>
              </div>
            </div>
            <div class="legend-col">
              <div class="legend-item">
                <span class="legend-dot orange"></span>
                <span>数据处理</span>
              </div>
              <div class="legend-item">
                <span class="legend-dot red"></span>
                <span>数据处理</span>
              </div>
              <div class="legend-item">
                <span class="legend-dot purple"></span>
                <span>数据处理</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'HomeView',
  mounted() {
    this.initCharts()
    this.updateTime()
    setInterval(this.updateTime, 1000)
  },
  methods: {
    updateTime() {
      const now = new Date()
      const timeStr = now.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      }).replace(/\//g, '/').replace(/,/g, '')
      document.querySelector('.datetime').textContent = timeStr
    },
    
    initCharts() {
      this.initRadarChart()
      this.initPieCharts()
      this.initMapChart()
      this.initTrendChart()
      this.initLineCharts()
      this.initBarChart()
      this.initDonutCharts()
    },

    initRadarChart() {
      const chart = echarts.init(this.$refs.radarChart)
      const option = {
        backgroundColor: 'transparent',
        radar: {
          indicator: [
            { name: '文本1', max: 150 },
            { name: '文本2', max: 150 },
            { name: '文本3', max: 150 },
            { name: '文本4', max: 150 },
            { name: '文本5', max: 150 }
          ],
          axisLine: { lineStyle: { color: '#1e3a5f' } },
          splitLine: { lineStyle: { color: '#1e3a5f' } },
          axisLabel: { color: '#7ec7ff' }
        },
        series: [{
          type: 'radar',
          data: [{
            value: [43, 100, 28, 3, 150],
            areaStyle: { color: 'rgba(0, 255, 255, 0.1)' },
            lineStyle: { color: '#00ffff' },
            itemStyle: { color: '#00ffff' }
          }]
        }]
      }
      chart.setOption(option)
    },

    initPieCharts() {
      // 第一个饼图
      const chart1 = echarts.init(this.$refs.pieChart1)
      const option1 = {
        backgroundColor: 'transparent',
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          data: [
            { value: 30, name: '20-29岁', itemStyle: { color: '#00ffff' } },
            { value: 25, name: '30-39岁', itemStyle: { color: '#0080ff' } },
            { value: 25, name: '40-49岁', itemStyle: { color: '#ffff00' } },
            { value: 20, name: '50岁以上', itemStyle: { color: '#00ff00' } }
          ],
          label: { show: false }
        }]
      }
      chart1.setOption(option1)

      // 第二个饼图
      const chart2 = echarts.init(this.$refs.pieChart2)
      const option2 = {
        backgroundColor: 'transparent',
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          data: [
            { value: 35, name: '硕士', itemStyle: { color: '#00ff80' } },
            { value: 30, name: '本科', itemStyle: { color: '#ffff00' } },
            { value: 20, name: '本科', itemStyle: { color: '#ff8000' } },
            { value: 15, name: '其他', itemStyle: { color: '#ff0080' } }
          ],
          label: { show: false }
        }]
      }
      chart2.setOption(option2)
    },

    initMapChart() {
      const chart = echarts.init(this.$refs.mapChart)
      // 简化的中国地图数据点
      const geoData = [
        { name: '北京', value: [116.46, 39.92, 100] },
        { name: '上海', value: [121.48, 31.22, 80] },
        { name: '广州', value: [113.23, 23.16, 90] },
        { name: '深圳', value: [114.07, 22.62, 85] },
        { name: '杭州', value: [120.19, 30.26, 75] },
        { name: '南京', value: [118.78, 32.04, 70] },
        { name: '武汉', value: [114.31, 30.52, 65] },
        { name: '成都', value: [104.06, 30.67, 60] }
      ]

      const option = {
        backgroundColor: 'transparent',
        geo: {
          map: 'china',
          roam: false,
          itemStyle: {
            areaColor: '#1e3a5f',
            borderColor: '#4a90e2'
          },
          emphasis: {
            itemStyle: {
              areaColor: '#2a4a6f'
            }
          }
        },
        series: [{
          type: 'scatter',
          coordinateSystem: 'geo',
          data: geoData,
          symbolSize: function(val) {
            return val[2] / 5
          },
          itemStyle: {
            color: '#ffff00',
            shadowBlur: 10,
            shadowColor: '#ffff00'
          }
        }]
      }
      chart.setOption(option)
    },

    initTrendChart() {
      const chart = echarts.init(this.$refs.trendChart)
      const option = {
        backgroundColor: 'transparent',
        grid: { top: 10, right: 10, bottom: 20, left: 30 },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          axisLine: { lineStyle: { color: '#4a90e2' } },
          axisLabel: { color: '#7ec7ff' }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#4a90e2' } },
          axisLabel: { color: '#7ec7ff' },
          splitLine: { lineStyle: { color: '#1e3a5f' } }
        },
        series: [{
          type: 'line',
          data: [2, 4, 6, 8, 10, 12],
          lineStyle: { color: '#00ffff' },
          itemStyle: { color: '#00ffff' },
          areaStyle: { color: 'rgba(0, 255, 255, 0.1)' }
        }]
      }
      chart.setOption(option)
    },

    initLineCharts() {
      // 第一个折线图
      const chart1 = echarts.init(this.$refs.lineChart1)
      const option1 = {
        backgroundColor: 'transparent',
        grid: { top: 20, right: 20, bottom: 30, left: 40 },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          axisLine: { lineStyle: { color: '#4a90e2' } },
          axisLabel: { color: '#7ec7ff' }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#4a90e2' } },
          axisLabel: { color: '#7ec7ff' },
          splitLine: { lineStyle: { color: '#1e3a5f' } }
        },
        series: [
          {
            name: '2017年',
            type: 'line',
            data: [2, 6, 4, 8, 6, 10],
            lineStyle: { color: '#00ffff' },
            itemStyle: { color: '#00ffff' }
          },
          {
            name: '2018年',
            type: 'line',
            data: [4, 8, 6, 10, 8, 12],
            lineStyle: { color: '#0080ff' },
            itemStyle: { color: '#0080ff' }
          }
        ]
      }
      chart1.setOption(option1)

      // 第二个折线图
      const chart2 = echarts.init(this.$refs.lineChart2)
      const option2 = {
        backgroundColor: 'transparent',
        grid: { top: 20, right: 20, bottom: 30, left: 40 },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          axisLine: { lineStyle: { color: '#4a90e2' } },
          axisLabel: { color: '#7ec7ff' }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#4a90e2' } },
          axisLabel: { color: '#7ec7ff' },
          splitLine: { lineStyle: { color: '#1e3a5f' } }
        },
        series: [{
          type: 'line',
          data: [8, 12, 10, 14, 12, 16],
          lineStyle: { color: '#00ff80' },
          itemStyle: { color: '#00ff80' },
          smooth: true
        }]
      }
      chart2.setOption(option2)
    },

    initBarChart() {
      const chart = echarts.init(this.$refs.barChart)
      const option = {
        backgroundColor: 'transparent',
        grid: { top: 20, right: 20, bottom: 30, left: 40 },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
          axisLine: { lineStyle: { color: '#4a90e2' } },
          axisLabel: { color: '#7ec7ff' }
        },
        yAxis: {
          type: 'value',
          max: 15,
          axisLine: { lineStyle: { color: '#4a90e2' } },
          axisLabel: { color: '#7ec7ff' },
          splitLine: { lineStyle: { color: '#1e3a5f' } }
        },
        series: [
          {
            name: '文本1',
            type: 'bar',
            data: [3, 6, 9, 12, 15, 12, 9, 6, 3],
            itemStyle: { color: '#00ffff' }
          },
          {
            name: '文本2',
            type: 'bar',
            data: [2, 4, 6, 8, 10, 8, 6, 4, 2],
            itemStyle: { color: '#00ff80' }
          }
        ]
      }
      chart.setOption(option)
    },

    initDonutCharts() {
      // 第一个环形图
      const chart1 = echarts.init(this.$refs.donutChart1)
      const option1 = {
        backgroundColor: 'transparent',
        series: [{
          type: 'pie',
          radius: ['50%', '80%'],
          data: [
            { value: 40, itemStyle: { color: '#00ffff' } },
            { value: 30, itemStyle: { color: '#0080ff' } },
            { value: 30, itemStyle: { color: '#00ff80' } }
          ],
          label: { show: false }
        }]
      }
      chart1.setOption(option1)

      // 第二个环形图
      const chart2 = echarts.init(this.$refs.donutChart2)
      const option2 = {
        backgroundColor: 'transparent',
        series: [{
          type: 'pie',
          radius: ['50%', '80%'],
          data: [
            { value: 35, itemStyle: { color: '#ff8000' } },
            { value: 25, itemStyle: { color: '#ff0080' } },
            { value: 40, itemStyle: { color: '#8000ff' } }
          ],
          label: { show: false }
        }]
      }
      chart2.setOption(option2)
    }
  }
}
</script>

<style scoped>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.dashboard {
  width: 1920px;
  height: 1080px;
  background: linear-gradient(135deg, #0c1e3a 0%, #1a3a5c 100%);
  color: #ffffff;
  font-family: 'Microsoft YaHei', sans-serif;
  overflow: hidden;
  transform-origin: 0 0;
  position: absolute;
  top: 0;
  left: 0;
}

/* 自适应缩放 */
@media screen {
  .dashboard {
    transform: scale(calc(100vw / 1920));
  }
}

@media screen and (max-aspect-ratio: 16/9) {
  .dashboard {
    transform: scale(calc(100vh / 1080));
  }
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid #4a90e2;
  height: 60px;
}

.header h1 {
  font-size: 24px;
  margin: 0;
  color: #7ec7ff;
}

.nav-tabs {
  display: flex;
  gap: 20px;
}

.tab {
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
  font-size: 14px;
}

.tab.active {
  background: #4a90e2;
  color: #ffffff;
}

.datetime {
  font-size: 14px;
  color: #7ec7ff;
}

.main-content {
  display: flex;
  height: 1020px;
  gap: 10px;
  padding: 10px;
}

.left-panel, .right-panel {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.center-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.panel-item {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #4a90e2;
  border-radius: 6px;
  padding: 12px;
  backdrop-filter: blur(10px);
}

.panel-item h3 {
  margin: 0 0 12px 0;
  color: #7ec7ff;
  font-size: 16px;
  border-bottom: 1px solid #4a90e2;
  padding-bottom: 6px;
}

.data-table {
  font-size: 12px;
}

.table-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #4a90e2;
  color: #7ec7ff;
  font-weight: bold;
}

.table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(74, 144, 226, 0.3);
}

.rate {
  color: #00ff80;
}

.radar-chart {
  height: 180px;
  margin-bottom: 10px;
}

.radar-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-dot.blue { background: #00ffff; }
.legend-dot.green { background: #00ff80; }
.legend-dot.yellow { background: #ffff00; }
.legend-dot.orange { background: #ff8000; }
.legend-dot.purple { background: #8000ff; }
.legend-dot.cyan { background: #00ffff; }
.legend-dot.red { background: #ff0080; }

.value {
  margin-left: auto;
  color: #00ff80;
}

.pie-charts {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.pie-chart {
  flex: 1;
  height: 120px;
}

.pie-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  font-size: 12px;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.metrics-cards {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  height: 90px;
}

.metric-card {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #4a90e2;
  border-radius: 6px;
  padding: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.metric-card.special {
  background: linear-gradient(135deg, #1e3a5f 0%, #2a4a6f 100%);
}

.metric-label {
  font-size: 12px;
  color: #7ec7ff;
  margin-bottom: 6px;
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  color: #00ffff;
}

.metric-sub {
  font-size: 10px;
  color: #7ec7ff;
  margin-top: 4px;
}

.map-container {
  flex: 1;
  display: flex;
  gap: 10px;
  height: 400px;
}

.map-chart {
  flex: 2;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #4a90e2;
  border-radius: 6px;
}

.map-legend {
  width: 200px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #4a90e2;
  border-radius: 6px;
  padding: 12px;
}

.map-legend h4 {
  margin: 0 0 10px 0;
  color: #7ec7ff;
  font-size: 14px;
}

.trend-chart {
  height: 120px;
  margin-bottom: 10px;
}

.trend-stats {
  font-size: 12px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.bottom-charts {
  display: flex;
  gap: 10px;
  height: 200px;
}

.chart-item {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #4a90e2;
  border-radius: 6px;
  padding: 12px;
}

.chart-item h4 {
  margin: 0 0 10px 0;
  color: #7ec7ff;
  font-size: 14px;
}

.line-chart {
  height: 150px;
}

.progress-chart {
  margin-bottom: 10px;
}

.progress-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
}

.progress-bar {
  height: 8px;
  background: rgba(74, 144, 226, 0.3);
  border-radius: 4px;
  margin-bottom: 6px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #00ffff;
  border-radius: 4px;
}

.progress-value {
  text-align: center;
  font-size: 20px;
  color: #00ffff;
  margin-bottom: 10px;
}

.chart-stats {
  display: flex;
  gap: 20px;
  font-size: 12px;
}

.stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot.blue { background: #0080ff; }

.bar-chart {
  height: 180px;
  margin-bottom: 10px;
}

.chart-legend {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 12px;
}

.gauge-container {
  margin-bottom: 15px;
}

.gauge-item {
  text-align: center;
  margin-bottom: 10px;
}

.gauge-label {
  font-size: 12px;
  color: #7ec7ff;
}

.gauge-value {
  font-size: 14px;
  color: #00ffff;
}

.gauge-circles {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 15px 0;
}

.gauge-circle {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
}

.gauge-circle.large {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #ffff00 0%, #ff8000 100%);
  color: #000;
}

.gauge-circle.medium {
  width: 55px;
  height: 55px;
  background: linear-gradient(135deg, #00ffff 0%, #0080ff 100%);
  color: #000;
}

.gauge-circle.small {
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #00ff80 0%, #008040 100%);
  color: #000;
}

.gauge-stats {
  font-size: 12px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: #7ec7ff;
}

.stat-row .value {
  color: #00ff80;
}

.donut-charts {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.donut-chart {
  flex: 1;
  height: 120px;
}

.donut-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  font-size: 11px;
}

.legend-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
</style>